<template>
  <div @click="handleclick(data.filmId)" style="overflow: hidden;">
    <img :src="data.poster" :alt="data.name" :title="data.name">
    <div class="item-content">
      <p class="item-title">
        <span class="item-name">{{ data.name }}</span>
        <span class="item-filmtype">{{ data.filmType.name }}</span>
      </p>
      <p v-if="data.grade">观众评分 <span class="item-grade">{{ data.grade }}</span></p>
      <p class="item-actors">主演：
        <span v-for="actor in data.actors" :key="actor | isactor">
          <span v-if="actor.role !== '导演'">{{ actor.name }} </span>
        </span>
      </p>
      <p v-show="istime">
        <span>{{ data.nation }}</span>|<span>{{ data.runtime }}分钟</span>
      </p>
      <p v-show="!istime">
        <span>上映日期：{{ data.premiereAt | premiere }}</span>
      </p>
    </div>
    <div class="item-purchase">
      <slot></slot>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import moment from 'moment'

// 导演过滤器
Vue.filter('isactor', (data) => {
  if (data.role !== '导演') {
    return data.name
  }
})

// 时间过滤器
Vue.filter('premiere', (data) => {
  moment.locale('zh-cn') // 设置成中文
  return moment(data * 1000).format('dddd MMM Do')
})

export default {
  props: {
    data: {
      type: Object,
      default: null
    },
    istime: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleclick (id) {
      // 点击跳转到详情页面 并传入参数
      this.$router.push({
        name: 'data',
        params: {
          id
        }
      })
    }
  }
}
</script>
<style scoped>
p{
  width: 100%;
  color: #797d82;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

img{
  width: 8.375rem;
  height: 11.875rem;
  float: left;
}
.item-content{
  float: left;
  box-sizing: border-box;
  width: 28.5rem;
  height: 11.875rem;
  padding: 1rem;
}
.item-content .item-title{
  margin-top:0rem;
}
.item-content .item-name{
  font-size: 2rem;
  color: black;
}
.item-content .item-filmtype{
  display: inline-block;
  text-align: center;
  width: 2.5rem;
  height: 1.8rem;
  line-height: 1.8rem;
  border-radius: .25rem;
  margin-left: .5rem;
  background: #d2d6dc;
  color: #ffffff;
  font-size: 1rem;
}
.item-content .item-grade{
  color: #ffb232;
  font-size: 2rem;
}
.item-purchase{
  float: left;
  width: 5rem;
  height: 3.125rem;
  line-height: 3.125rem;
  text-align: center;
  color: #ff5f16;
  box-sizing: border-box;
  border: .125rem solid #ff7f45;
  border-radius: .25rem;
  margin-top: 4.5rem;
}
</style>
